<template>
  <div class="user-layout">
    <el-container class="layout-container">
      <!-- 顶部导航栏 -->
      <el-header class="layout-header">
        <div class="header-content">
          <div class="logo">
            <el-icon><HomeFilled /></el-icon>
            <span>银行管理系统</span>
          </div>
          <div class="user-info">
            <span>欢迎，{{ userInfo?.username || '用户' }}</span>
            <el-dropdown @command="handleCommand">
              <el-avatar :src="userInfo?.imageurl" class="user-avatar">
                <el-icon><User /></el-icon>
              </el-avatar>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile">个人信息</el-dropdown-item>
                  <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-header>

      <el-container>
        <!-- 侧边栏 -->
        <el-aside class="layout-aside" :class="{ collapsed: collapsed }">
          <el-menu
            :default-active="$route.path"
            class="sidebar-menu"
            router
            :collapse="collapsed"
          >
            <el-menu-item index="/user/dashboard">
              <el-icon><House /></el-icon>
              <span>首页</span>
            </el-menu-item>
            <el-menu-item index="/user/account">
              <el-icon><User /></el-icon>
              <span>个人信息</span>
            </el-menu-item>
            <el-menu-item index="/user/cards">
              <el-icon><CreditCard /></el-icon>
              <span>我的银行卡</span>
            </el-menu-item>
            <el-menu-item index="/user/transfer">
              <el-icon><Money /></el-icon>
              <span>转账汇款</span>
            </el-menu-item>
            <el-menu-item index="/user/trades">
              <el-icon><DocumentCopy /></el-icon>
              <span>交易记录</span>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <!-- 主内容区 -->
        <el-main class="layout-main">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  HomeFilled,
  User,
  House,
  CreditCard,
  Money,
  DocumentCopy
} from '@element-plus/icons-vue'

export default {
  name: 'UserLayout',
  components: {
    HomeFilled,
    User,
    House,
    CreditCard,
    Money,
    DocumentCopy
  },
  setup() {
    const store = useStore()
    const router = useRouter()
    const collapsed = ref(false)

    const userInfo = computed(() => store.state.userInfo)

    const handleCommand = (command) => {
      switch (command) {
        case 'profile':
          router.push('/user/account')
          break
        case 'logout':
          store.dispatch('logout')
          ElMessage.success('退出登录成功')
          router.push('/login')
          break
      }
    }

    return {
      collapsed,
      userInfo,
      handleCommand
    }
  }
}
</script>

<style lang="scss" scoped>
.user-layout {
  height: 100vh;

  .layout-container {
    height: 100%;
  }

  .layout-header {
    background: #409eff;
    color: white;
    display: flex;
    align-items: center;
    padding: 0 20px;

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;

      .logo {
        display: flex;
        align-items: center;
        font-size: 18px;
        font-weight: bold;

        .el-icon {
          margin-right: 8px;
          font-size: 24px;
        }
      }

      .user-info {
        display: flex;
        align-items: center;
        gap: 10px;

        .user-avatar {
          cursor: pointer;
        }
      }
    }
  }

  .layout-aside {
    width: 200px !important;
    transition: width 0.3s;

    &.collapsed {
      width: 64px !important;
    }

    .sidebar-menu {
      height: 100%;
      border-right: none;
    }
  }

  .layout-main {
    background: #f5f5f5;
    padding: 20px;
  }
}
</style> 